<template>
  <a-card class="addShop">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="门店名称：" prop="shopName">
              <a-input v-model="ruleForm.shopName" :maxLength="9" placeholder="请输入门店名称"></a-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店区域：" >
              <!-- <a-cascader
                :options="adress"
                v-model="ruleForm.gysdz"
                change-on-select
                placeholder="请选择门店区域"
              ></a-cascader> -->
               <a-input style="width:30% ;margin-right:10px;" v-model="ruleForm.provinceCode" :maxLength="9" placeholder="请输入省份"></a-input>
               <a-input style="width:30% ;margin-right:10px;" v-model="ruleForm.cityCode" :maxLength="9" placeholder="请输入市"></a-input>
               <a-input style="width:30%" v-model="ruleForm.districtCode" :maxLength="9" placeholder="请输入区"></a-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店归属：" prop="shopType">
              <a-select v-model="ruleForm.shopType" placeholder="请选择门店归属" style="width:100%">
                <a-select-option
                  :value="item.label"
                  v-for="item in mdguishuList"
                  :key="item.value"
                >{{item.label}}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="所属业务：" prop="businessType">
              <a-checkbox-group v-model="ruleForm.businessType">
                <a-checkbox v-for="i in yewuList" :key="i.value" :value="i.value">{{i.label}}</a-checkbox>
              </a-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店位置：" required>
              <div class="mdweizhi">
                <el-form-item prop="longitude" label class="jwd">
                  <span>经度</span>
                  <a-input-number v-model="ruleForm.longitude" :precision="2" :step="0.1" :max="10"></a-input-number>
                </el-form-item>
                <el-form-item prop="latitude" label class="jwd">
                  <span>纬度</span>
                  <a-input-number v-model="ruleForm.latitude" :precision="2" :step="0.1" :max="10"></a-input-number>
                </el-form-item>
              </div>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label >
              <img
                src="https://axhub.im/ax9/7f585c1b0263b104/images/%E6%96%B0%E5%A2%9E%E9%97%A8%E5%BA%97/u67.png"
                style="width:100%;height:600px"
                alt
              />
            </el-form-item>
          </el-col> -->
        </el-row>
      </com-title>
      <div class="content">
        <a-button @click="save('ruleForm')" type="primary">保存</a-button>
        <a-button @click="quxiao('ruleForm')">取消</a-button>
      </div>
    </el-form>
  </a-card>
</template>

<script src='./index.js'></script>

<style lang="less">
.addShop {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .mdweizhi {
    display: flex;
    .jwd {
      span {
        padding-right: 10px;
      }
      .el-form-item__label {
        text-align: right;
        width: 50px !important;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        margin-right: 20px;
      }
    }
  }
}
</style>
